<template>
  <scroll-view class="card-list" :scroll-y="true" enable-flex>
    <view class="bottom-exit">
      <view class="exit-button" @tap="handleExit">exit</view>
    </view>
    <template v-if="project_list.length > 0">
      <view class="card-item" v-for="(project_item, index) in project_list" :key="project_item.id">
        <view class="card-header">
          <view class="left">
            Project id:{{ project_item.project_number
            }}{{ project_item.group_name ? '-' + project_item.group_name : '' }}
          </view>
          <view class="right"><image :src="Finished" /> <text>Finished</text> </view>
        </view>

        <view class="card-middle">
          <view class="row1">
            <view
              ><text>{{ $t('me.fullfillResponsible') }}</text>
              <u-avatar :src="project_item.inCharge_avata" size="56rpx"
            /></view>
            <view
              ><text>{{ $t('me.accountResponsible') }}</text>
              <u-avatar :src="project_item.delivery_incharge_avatar" size="56rpx"
            /></view>
          </view>
        </view>
        <view class="card-footer">
          <uni-collapse v-model="collapseValues" ref="collapseRef">
            <uni-collapse-item :name="index">
              <template v-slot:title>
                <view class="button-list" slot="title" align="left">
                  <view class="button" @tap.stop="onToSatisfaction(project_item)">
                    <image :src="Satisfaction" />
                    <text>{{ $t('me.satisfactionRating') }}</text>
                  </view>
                  <view class="button" @tap.stop="onToProjectWaterMark(project_item)">
                    <image :src="Picture" />
                    <text>Picture</text>
                  </view>
                </view>
              </template>
              <view class="collapse-content">
                <view
                  class="order-item"
                  v-for="item in project_item.work"
                  :key="item.id"
                  @tap.stop="navigateTo(`${COUNRSEPATH}?id=${item.source_uniqid}`)"
                >
                  <view class="order-title">
                    <view>
                      <text class="order-number">{{ item.source_uniqid }}</text>
                      <text>{{ item.department_type }}</text>
                    </view>
                    <view class="solution-responsible">
                      <text>{{ $t('me.solutionResponsible') }}</text>
                      <u-avatar :src="item.program_incharge_avatar[0]" size="56rpx" />
                    </view>
                  </view>
                  <view class="order-middle">
                    <scroll-view class="img-list">
                      <template v-if="item.imgs">
                        <view
                          class="img-item"
                          v-for="Imgitem in item.imgs.slice(0, 3)"
                          :key="Imgitem"
                        >
                          <img :src="Imgitem" alt="" />
                        </view>
                      </template>
                    </scroll-view>
                    <view class="img-number">{{ $t('me.total') + ':' + item.request_count }} </view>
                  </view>
                  <view class="order-footer">
                    <view class="more" @tap="navigateTo(`${COUNRSEPATH}?id=${item.source_uniqid}`)">
                      <u-icon name="more-circle" color="#AFBACA" size="30rpx" />
                      <text>{{ $t('me.more') }}</text>
                    </view>
                    <view
                      class="view-qc-report"
                      @tap="onToQCReport(item.source_uniqid, item.is_have_qc)"
                    >
                      {{ $t('me.viewQCReport') }}
                    </view>
                  </view>
                </view>
              </view>
            </uni-collapse-item>
          </uni-collapse>
        </view>
      </view>
    </template>
  </scroll-view>
</template>

<script>
import {
  COUNRSEPATH,
  SATISFACTIONPATH,
  QCREPORTPATH,
  LOGINPATCH,
  PROJECTWATERMARK
} from '@/constants/router/subPackages'
import Finished from '@/static/img/finished.png'
import Avatar from '@/static/img/avatar.png'
import Satisfaction from '@/static/img/satisfaction.png'
import Picture from '@/static/img/picture.png'
import storage from '@/utils/storage'
export default {
  data() {
    return {
      COUNRSEPATH,
      Finished,
      Avatar,
      Picture,
      Satisfaction,
      collapseValues: []
    }
  },
  name: 'ProjectList',
  props: {
    project_list: {
      type: Array,
      default: () => []
    },

    navigateTo: {
      type: Function,
      default: () => {}
    }
  },
  methods: {
    handleExit() {
      uni.showModal({
        title: 'exit',
        content: 'Are you sure you want to exit?',
        cancelText: 'cancel',
        confirmText: 'sure',
        success: (res) => {
          if (res.confirm) {
            storage.clear()
            uni.reLaunch({
              url: LOGINPATCH
            })
          }
        }
      })
    },
    onToSatisfaction(project_item) {
      const params = {
        id: project_item.id,
        record: JSON.stringify({
          client_id: project_item.client_id,
          project_number: project_item.project_number
        })
      }

      uni.$u.route({
        url: `${SATISFACTIONPATH}`,
        params: params
      })
    },
    onToQCReport(source_uniqid, is_have_qc) {
      if (is_have_qc == 0) return
      uni.navigateTo({
        url: `${QCREPORTPATH}?source_uniqid=${source_uniqid}&type=saleOrder`
      })
    },
    onToProjectWaterMark({ project_number }) {
      uni.$u.route({
        url: PROJECTWATERMARK,
        params: { project_number }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../scss/projectListV2.scss';
</style>
